<template>
    <div id="book-info">
        <el-page-header @back="goBack" content="返回列表">
        </el-page-header>
        <div style="margin-bottom: 10px;"></div>
        <el-form ref="form" :model="form" label-width="120px" v-if="form">
            <el-form-item label="书名：">
                <span>{{ form.name }}</span>
            </el-form-item>
            <el-form-item label="作者：">
                <span>{{ form.author }}</span>
            </el-form-item>
            <el-form-item label="借书人：" v-if="roleId != 3"> 
                <span>{{ form.userName }}</span>
            </el-form-item>
            <el-form-item label="所属类别：">
                <span>{{ form.categoryName }}</span>
            </el-form-item>
            <el-form-item label="位置：">
                <span>{{ form.location }}</span>
            </el-form-item>
            <el-form-item label="最迟归还日期：">
                <span>{{ form.deadline }}</span>
            </el-form-item>
            <el-form-item label="续借次数：">
                <span>{{ form.delayTime }}</span>
            </el-form-item>
            <el-form-item label="出版社：">
                <span>{{ form.publicationInformation }}</span>
            </el-form-item>
            <el-form-item label="总数：">
                <span>{{ form.totalNumber }}</span>
            </el-form-item>
            <el-form-item label="剩余数：">
                <span>{{ form.spareNumber }}</span>
            </el-form-item>
            <el-form-item label="是否可借阅：">
                <span>{{ form.status ? '不可借阅' : '可借阅' }}</span>
            </el-form-item>

            <el-form-item label="封面：">
                <!-- <img :src="form.picture" alt="" width="100" height="100"> -->
                <el-image style="width: 100px; height: 100px" :src="srcImg"></el-image>
            </el-form-item>

            <el-form-item label="入库时间：">
                <span>{{ form.createTime }}</span>
            </el-form-item>
            <el-form-item label="描述：">
                <span>{{ form.description }}</span>
            </el-form-item>
            <el-button type="success" v-if="roleId == 3" @click="continue_library">续借</el-button>
            <el-button type="success" v-if="roleId == 3" @click="comment_library">评论</el-button>
            <el-button type="success" v-if="roleId != 3 & !flag" @click="return_library">归还</el-button>
            <el-button type="success" v-if="roleId != 3 & flag" @click="expire_library">逾期归还</el-button>
        </el-form>

        <h2 v-if="!form" style="text-align: center;">
            此书已经归还
        </h2>

        <div class="add-box">
            <!-- <el-button type="primary" @click="addDialogVisible = true">添加</el-button> -->
            <el-dialog title="添加评论" @close="closeAddBtn" :visible.sync="addDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false">
                <el-form :model="addForm" label-width="80px" ref="addForm">
                    <el-form-item label="评论" prop="comment">
                        <el-input  type="textarea" v-model="addForm.comment" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAddComment">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { NowInfo, lendOutInfo, normalReturnBook, expireReturnBook } from '@/api/nowLend'
import {  addComment } from '@/api/comment'

export default {

    methods: {
        // api
        getBookInfo() {
            NowInfo({ id: this.id }).then(res => {
                this.form = res.data
                this.srcImg = require('@/assets'+ this.form.picture)
                if(new Date().getTime() > new Date(this.form.deadline).getTime()){
                    this.flag = true
                }
            }).catch(error => {
                reject(error)
            })
        },
        // api
        continue_library(){
            lendOutInfo({ id: this.id }).then(res => {
                this.$message({
                    type: 'warning',
                    message: res.data
                });
                this.getBookInfo()
            }).catch(error => {
                reject(error)
            })
        },
        // api
        handleAddComment() {
            addComment({ bookId: this.form.bookId, comment:  this.addForm.comment}).then(res => {
                this.addDialogVisible = false
                this.$message({
                    type: 'success',
                    message: '评论成功'
                });
            }).catch(error => {
                reject(error)
            })
        },

        goBack() {
            this.$router.push("/mybook/now_book")
        },
        
        comment_library(){
            this.addDialogVisible = true
        },
        return_library(){
            normalReturnBook({ id: this.id }).then(res => {
                this.$message({
                    type: 'warning',
                    message: res.data
                });
                this.getBookInfo()
            }).catch(error => {
                reject(error)
            })
        },
        expire_library(){
            expireReturnBook({ id: this.id }).then(res => {
                this.$message({
                    type: 'warning',
                    message: res.data
                });
                this.getBookInfo()
            }).catch(error => {
                reject(error)
            })
        },
        closeAddBtn(){
            this.$refs['addForm'].resetFields();
        }
    },
    created() {
        this.id = this.$route.query.id;
        this.roleId = this.$store.state.user.roleId
        this.getBookInfo()
    },
    data() {
        return {
            flag: false,
            id: '',
            roleId: '',
            addDialogVisible: false,
            form: {

            },
            addForm:{
                comment: ''
            },
            srcImg: ''
        }
    }
}
</script>


<style  lang="scss" scoped>
#book-info {
    padding: 40px 20px;
    width: 60%;
}
</style>